<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{URL::asset('js/echarts.js')}}"></script>
<style type="text/css">

</style>


<body>

<form>
    <div class="form-group col-md-6">
        <label class="control-label" for="type">类型</label>
        <select class="form-control" name="type" id="type">
            <option value="1">个人</option>
            <option value="2">小组</option>
            <option value="3">大营</option>
        </select>
    </div>
    <div class="form-group col-md-6">
        <label for="day" class="control-label">日期</label>
        <select class="form-control" name="day" id="day">
            @for($i=1;$i<=18;$i++)
                <option value='{{$i}}'>{{'Day'.$i}}</option>
            @endfor
        </select>
    </div>
    <div class="form-group col-md-6">
        <label for="day" class="control-label">营（选择大营类型时忽略此选项）</label>
        <select class="form-control" name="camp" id="camp">
            @foreach($small as $k=>$v)
                <option value="{{$k}}">{{$v}}</option>
            @endforeach
        </select>
    </div>
    <a id="btn_save" class="btn btn-success" style="margin-left:100px">查询</a>
</form>

<div class="box box-body" id="chart_container" style="margin-top:40px">

</div>
</body>

<script type="text/javascript">
    $('#btn_save').on('click',function(){
        $('#chart_container').empty();
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

        var request = {};

        request.type = $('#type option:selected').val();
        request.day = $('#day option:selected').val();
        request.camp = $('#camp option:selected').val();

        $.post('/admin/SpeakReport/submit',request,function(e){
            var title = '';
            var html = '';

            if(request.type == 1){
                title = '个人';
            }else if(request.type == 2){
                title = '小组';
            }else{
                title = '大营';
            }

            if(Object.keys(e.reading).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'写作情况排行'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.reading.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.reading.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.reading.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
            if(Object.keys(e.words).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'单词情况排行'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.words.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.words.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.words.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
            if(Object.keys(e.zuoye).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'演讲技巧作业排行'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.zuoye.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.zuoye.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.zuoye.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
            if(Object.keys(e.total).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'总分排行榜'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.total.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.total.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.total.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
            if(Object.keys(e.work).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'演讲作业进步榜'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.work.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.work.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.work.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
            if(Object.keys(e.word).length > 0){
                var length = $('#chart_container').children().length;
                html = '<div id="chart-'+length+'" style="width:auto;height:600px"></div>'
                $('#chart_container').append(html);

                var dom1 = document.getElementById("chart-"+length);
                var myChart1 = echarts.init(dom1);

                option = {
                    title:{
                        text:title+'词汇进步情况排行'
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: e.word.name,
                    },
                    dataZoom: [
                        {
                            show: true,
                            yAxisIndex: 0,
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        data: e.word.score,
                        type: 'bar',
                        label: {normal: {
                                show: true,
                                position: 'right',
                                fontSize: 16,
                            }},
                        markLine: {
                            data: [
                                {
                                    xAxis:e.word.avg,
                                    name: '平均数',
                                    label: {
                                        normal: {
                                            position: 'end',
                                            formatter: '{b}: {c}'
                                        }
                                    }
                                }
                            ],
                            lineStyle:{
                                type:'solid',
                                color:'#000',
                                width:2
                            }
                        }
                    }]
                };

                myChart1.setOption(option);
            }
        })
    });
</script>